// pages/films/player.js
let app=getApp() //获取小程序对象
let pp //列表页面对象
let index //列表页面点击视频的索引号
let currentTime //记录视频当前播放的位置
let videoContext //VideoContext实例， 通过id跟一个video组件绑定以操作对应的video组件
Page({
	data:{
		rateIndex:2, //默认1倍速，正常播放
		rates:['0.5', '0.8', '1.0', '1.25', '1.5', '2.0', '3.0', '4.0'],
	},
	rate(e){ //点击播放倍速时执行
		let rateIndex=e.target.dataset.index //获取点击的索引号
		this.setData({rateIndex}) //更新页面谁
		videoContext.playbackRate(parseFloat(this.data.rates[rateIndex]))
	},
	meta(e){ //视频元数据加载完成时触发
		console.log(e)
		this.setData({
			height: 710*e.detail.height/e.detail.width
		})
		let rateIndex=this.data.rateIndex
		videoContext.playbackRate(parseFloat(this.data.rates[rateIndex]))
	},
	timeupdate(e){ //播放进度变化时触发
		currentTime=e.detail.currentTime
	},
	async play(e){ //点击某一集视频直播播放
		let listIndex=e.target.dataset.index //点击剧集的索引号
		if(listIndex==null)return //说明没有点击到某一集上面
		let sourceIndex=this.data.sourceIndex //当前源的索引号
		let change={playingIndex: sourceIndex} //记录有变化的数据
		let playingIndex=this.data.playingIndex //点击前正在播放的视频所在源的索引号
		if(playingIndex!=null && currentTime!=null){
			let source=this.data.sources[playingIndex] //点击前正在播放的视频所在的源对象
			let listIndex=source.listIndex //原来播放视频的索引号
			change[`sources[${playingIndex}].list[${listIndex}].currentTime`]=currentTime //记录进度
		}
		currentTime=null //视频尚未播放，初始化为null
		change[`sources[${sourceIndex}].list[${listIndex}].selected`]=true //点击的剧集处于选中的状态
		change[`sources[${sourceIndex}].listIndex`]=listIndex //点击的剧集处于选中的状态
		this.setData(change) //更新页面数据

		let source=this.data.sources[sourceIndex] //当前源对象
		let video=source.list[listIndex] //要播放的视频对象
		console.log({...video})
		if(video.url.endsWith('.m3u8')){ //已经是m3u8视频地址了
			this.setData({ url: video.url, currentTime:video.currentTime }) //直接设置为video要播放的视频src
			return
		}
		let url=`${pp.host}${video.url}` //完整的某一集视频播放的地址
		console.log(url);
		let html=await app.request({url})
		// console.log(html);
		let r, regex=/now="([^"]+)";var pn="[^"]+"; var next="([^"]*)/ //获取m3u8地址的正则表达式
		change={}
		if(r=regex.exec(html)){
			change[`sources[${sourceIndex}].list[${listIndex}].url`]=r[1] //当前视频的m3u8网址
			if(r[2])change[`sources[${sourceIndex}].list[${listIndex+1}].url`]=r[2] //下个视频的地址
			change.url=r[1] //video组件播放的视频
			this.setData(change) //更新页面数据
		}
	},
	sources(e){ //点击视频源
		console.log(e);
		let sourceIndex=e.target.dataset.index //点击源的索引号
		let oldIndex=this.data.sourceIndex //上次点击的源的索引号
		if(oldIndex==sourceIndex)return //点击是同一个源，不用处理，直接返回
		let change={sourceIndex} //记录有变化的数据
		if(oldIndex!=null)change[`sources[${oldIndex}].selected`]=false //取消原来源的选择状态
		change[`sources[${sourceIndex}].selected`]=true //设置新点击源的现在状态
		this.setData(change, ()=>{ //更新页面数据
			let source=this.data.sources[sourceIndex] //当前源对象
			if(!this.data.url && source.list && source.list.length>0){
				this.play({target:{dataset:{index:0}}}) //默认播放第一集
			}
		})
	},
	async onLoad(e){
		// videoContext=wx.createVideoContext('video') //获取video的videoContext实例以控制video
		wx.createSelectorQuery().select('#video').context(r=>{ //
			videoContext=r.context
		}).exec()
		console.log(e)
		index=parseInt(e.index) //点击列表的索引号
		//数组中第一个元素为首页，最后一个元素为当前页面 [ main, films/index, films/player]
		let pages=getCurrentPages() //获取当前页面栈
		pp=pages[pages.length-2] //列表页面对象
		console.log(pp.data) //获取列表页面的数据
		let menu=pp.data.menus[pp.data.menuIndex] //当前菜单
		let type=menu.types[menu.typeIndex] //当前类型
		let video=type.list[index] //要播放的视频
		console.log({...video})
		if(video.playMessage){ //有播放信息
			// video.playMessage.rateIndex=2 //默认正常速度
			this.setData(video.playMessage) //设置页面数据
			return 
		}
		let url=`${pp.host}${video.url}` //播放视频页面的网址
		
		let html=await app.request({url}) //获取播放页面的html文本
		// console.log(html)
		let r, jj, regex=/video-info-content">(.+?)<\/div>/s //获取简介的正则表达式
		if(r=regex.exec(html)){
            jj='　　'+r[1].replace(/<\/?(br|p|div)[^>]*>|　+/g,'\n')
            .replace(/<[^>]*>/g,'')
            .replace(/&nbsp;/g,' ')
            .replace(/\s*\n\s*/g, '\n　　')
            .trim()
		}
		let sources=[] //存放数据源
		regex=/value="([^"]+)/g //查找数据源的正则表达式
		while(r=regex.exec(html)){
			sources.push({ //保存数据源对象
				name: r[1],
			})
        }
        regex=/sort-item">(.+?)<\/div>/gs //每个源都有多集的信息，信息间的定界符
        let ind=-1
        while(r=regex.exec(html)){
            let r2, re=/title="([^"]+)" href="([^"]+)/g, list=[]
            while(r2=re.exec(r[1])){
                list.push({
                    name: r2[1], //每一集的名称
                    url: r2[2], //每一集的地址
                })
            }
            sources[++ind].list=list
        }
		this.setData({
			title: video.title,
			jj,
			sources,
		}, ()=>{ //该箭头函数是成功设置页面数据后才会执行
			this.sources({target:{dataset:{index:0}}}) //模拟点击索引号是0的源
		})
	},
	onUnload(){ //页面卸载
		this.save()
	},
	onHide(){ //页面进入后台
		this.save()
	},
	save(){
		let menuIndex=pp.data.menuIndex //列表页面的当前菜单的索引号
		let menu=pp.data.menus[menuIndex] //列表页面的当前菜单项
		let typeIndex=menu.typeIndex //当前菜单下当前类型的索引号
		let change={} //记录有变化的数据
		let playMessage={...this.data, currentTime} //视频播放信息: 简介，源，每一集的信息，....
		delete playMessage.__webviewId__
		console.log(playMessage, menuIndex, typeIndex, index);
		change[`menus[${menuIndex}].types[${typeIndex}].list[${index}].playMessage`]=playMessage
		pp.setData(change) //保存播放信息到列表页面某一视频对象中
	}
})